<template>
    <view class="container" :style="themeColor">
        <scroll-view :scroll-y="true" class="paddingBottomBar">
            <view class="item-box">
                <cart-item-product
                    :isShowCheckBox="false"
                    :productInfo="productInfo"
                    :selectData="selectData"></cart-item-product>
                <view v-if="data.arr && data.arr.length > 0">
                    <cart-item-specs
                        :key="index"
                        v-for="(item, index) in data.arr"
                        :isShowCheckBox="false"
                        :isShowDel="true"
                        :productInfo="item"
                        :selectData="selectData"
                        @change="change"
                        @del="del"></cart-item-specs>
                </view>
                <mescroll-empty v-else :option="upOption.empty"></mescroll-empty>
            </view>
        </scroll-view>

        <view class="bottom-bar">
            <view class="price">
                <text class="price-yuan"
                    ><text class="price-text">{{ totalPrice }}</text> 元</text
                >
                <text>种类:{{ totalSpace }}；数量:{{ totalNum }}</text>
            </view>
            <button class="btn btn-success" @click="addCart" :disabled="data.arr && data.arr.length < 1">确认</button>
        </view>
    </view>
</template>

<script>
import cartItemProduct from "@/components/cart/cart-item-product.vue"
import cartItemSpecs from "@/components/cart/cart-item-specs.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { updateCart } from "@/utils/cartUtil.js"
export default {
    components: {
        cartItemProduct,
        cartItemSpecs,
    },
    data() {
        return {
            productInfo: {},
            data: {},
            selectData: {
                proIds: [],
                ids: [],
            },
            totalPrice: 0,
            totalNum: 0,
            totalSpace: 0,
        }
    },
    onLoad(e) {},
    mounted() {
        this.data = storage.getCache("tempCart")
        let pro = this.data.data
        this.productInfo = {
            ProductId: pro.ID,
            V_Title: pro.ProductName,
            V_ThumbnailUrl160: pro.ThumbnailUrl60,
            SubItems: this.data.arr,
        }
        this.getTotal()
    },
    methods: {
        getTotal() {
            this.totalNum = 0
            this.totalPrice = 0
            this.totalSpace = this.data.arr.length
            this.data.arr.forEach((e) => {
                this.totalNum += e.Amount
                this.totalPrice += e.Amount * e.V_FactPrice
            })

            this.totalPrice = this.totalPrice.toFixed(2)
        },
        addCart() {
            if (this.data.arr.length < 1) {
                return
            }
            //加入购物车
            updateCart(this.data.arr, true).then((res) => {})
            this.clearCache()
            var pages = getCurrentPages()
            var currPage = pages[pages.length - 2] //当前页面
            if (currPage) {
                //#ifdef H5
                currPage.isClosePop = true
                //#endif
                //#ifndef H5
                currPage.setData({
                    isClosePop: true,
                })
                //#endif
            }
            uni.navigateBack({
                //uni.navigateTo跳转的返回，默认1为返回上一级
                delta: 1,
            })
        },
        //规格数据更新
        change(e) {
            this.data.arr.forEach((item) => {
                if (item.SkuId == e.SkuId && item.ProductId == e.ProductId && item.UnitId == e.UnitId) {
                    item.Amount = e.Amount
                }
            })
            this.$forceUpdate()
            this.getTotal()
        },
        //删除更新
        del(e) {
            this.data.arr.forEach((item, index) => {
                if (item.SkuId == e.SkuId && item.ProductId == e.ProductId && item.UnitId == e.UnitId) {
                    this.data.arr.splice(index, 1)
                }
            })
            this.$forceUpdate()
            this.getTotal()
        },
        //清缓存
        clearCache() {
            storage.removeCache("tempCart")
        },
    },
}
</script>

<style lang="scss">
.bottom-bar {
    display: flex;
    flex-direction: row;

    .price {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        .price-yuan {
            color: $color-red;
        }
        .price-text {
            font-weight: 600;
            font-size: $font-size-36;
        }
    }

    .btn {
        width: 200rpx;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
    }
}

.container {
    padding: $app-page-padding;
}

.item-box {
    border-radius: $border-radius-10;
    background: $color-white;
    padding: 0 $app-page-padding;
}
</style>
